import type { TableColumnCtx } from 'element-plus';

import type { Dict } from '@croco/framework/types';

import type { FieldProps } from '#/components/data-table';

import { h } from 'vue';

import { ElText } from 'element-plus';

export function useTable(enums: Record<string, Array<Dict> | undefined>): FieldProps[] {
    const formatter = (row: any, column: TableColumnCtx) => {
        switch (column.property) {
            case 'status': {
                const dict = enums[column.property]?.find((item) => item.value === row[column.property]);
                return h(ElText, { type: dict?.listClass || 'info' }, { default: () => dict?.label || '--' });
            }
            case 'timeFrame': {
                return row.loginTime;
            }
            default: {
                return row[column.property];
            }
        }
    };
    return [
        { prop: 'username', label: '用户名', search: { value: '' }, column: { width: 250, fixed: 'left' } },
        { prop: 'ipaddr', label: '登录地址', search: true, column: { width: 120 } },
        { prop: 'location', label: '登录地点', search: true, column: { width: 250 } },
        { prop: 'browser', label: '浏览器', column: { width: 150 } },
        { prop: 'os', label: '操作系统', column: { width: 150 } },
        { prop: 'status', label: '操作结果', search: { order: 1, value: '' }, column: { width: 90, align: 'center', formatter } },
        { prop: 'message', label: '操作信息', column: { minWidth: 250 } },
        { prop: 'timeFrame', label: '登录时间', search: { span: 2, order: 2 }, column: { width: 190, formatter } },
    ];
}
